<template>
  <div style="width: 98%;margin: 0 auto;padding: 20px 0 20px 0">
    <el-tabs ref="tabs" type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="公司复盘" name="1">
        <!--维护工作复盘表-公司-->
        <!--本月目标-->
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <div style="text-align: center">
              <div>本月目标</div>
            </div>
          </div>
          <div style="text-align: right;padding-right: 20px">
            <div v-show="!companyThisMonthCustomerData.can_edit && checkShowFillBtn(companyThisMonthCustomerData)">
              <el-button
                type="text" size="mini"
                @click="companyThisMonthCustomerData.can_edit=true"
              >填写
              </el-button>
              <el-tooltip slot="label" placement="top" content="目标数据会同步到客户跟进的签约额中">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <el-button v-show="companyThisMonthCustomerData.can_edit" type="text" size="mini"
                       @click="saveThisMonthTargetFilling(1)"
            >保存
            </el-button>
            <el-button v-show="companyThisMonthCustomerData.can_edit" type="text" size="mini"
                       @click="cancelThisMonthTargetFilling(1)"
            >取消
            </el-button>
          </div>
          <table v-loading="companyThisMonthTableLoading" class="mailTable" style="width: 100%">
            <tr class="firstTr header">
              <td class="firstTd" colspan="7">
                {{ companyThisMonthCustomerData.month }}
                月份目标{{
                  companyThisMonthCustomerData.target ? companyThisMonthCustomerData.target + '万元' : '暂无'
                }}
              </td>
              <td>辅助与后期签单</td>
            </tr>
            <tr class="header_two">
              <td class="firstTd" style="width: 12%">周期时间</td>
              <td style="width: 6%">本周总目标<br/>(万元)</td>
              <td style="width: 10%">目标客户组成</td>
              <td style="width: 17%">本周目标<br/>(万元)</td>
              <td style="width: 10%">签约金额<br/>(万元)</td>
              <td style="width: 10%">签约时间</td>
              <td style="width: 5%">完成率</td>
              <td style="width: 30%">本周期需要拜访的客户</td>
            </tr>
            <template
              v-if="companyThisMonthCustomerData.weekReplayDetailList && companyThisMonthCustomerData.weekReplayDetailList.length"
              v-for="item in companyThisMonthCustomerData.weekReplayDetailList"
            >
              <tr v-if="item.target_customer_list && item.target_customer_list.length"
                  v-for="(tmp,index) in item.target_customer_list"
              >
                <td v-if="index===0" class="firstTd" :rowspan="item.target_customer_list.length">
                  {{ item.begin_date + '~' + item.end_date }}
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">{{ item.target }}</td>
                <td>{{ tmp.name }}</td>
                <td>
                  <div v-if="!tmp.is_created">
                    {{ tmp.target ? tmp.target : '暂无' }}
                  </div>
                  <div v-else>
                    <el-input v-show="companyThisMonthCustomerData.can_edit" size="mini"
                              v-model="tmp.fill_target" type="number" step="0.01"
                              placeholder="请输入目标"
                    >
                      <template slot="append">万</template>
                    </el-input>
                    <div v-show="!companyThisMonthCustomerData.can_edit">
                      {{ tmp.fill_target ? tmp.fill_target : '暂无' }}（可填写)
                    </div>
                  </div>
                </td>
                <td>
                  <div v-for="d in tmp.contracted_amount_list">{{ d }}</div>
                </td>
                <td>
                  <div v-for="d in tmp.contracted_amount_list">{{ d }}</div>
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">
                  {{ item.completion_rate }}%
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">
                  <div v-if="item.need_visit_customer_list && item.need_visit_customer_list.length">
                            <span v-for="(customer,i) in item.need_visit_customer_list" :key="i"
                                  :class="customer.visited?'text-green':''"
                            >{{ customer.next_visit_time.substring(5) + '——' + customer.name }}<br/></span>
                  </div>
                  <div v-if="!item.need_visit_customer_list || item.need_visit_customer_list.length===0">
                    暂无
                  </div>
                </td>
              </tr>
              <tr v-if="!item.target_customer_list|| item.target_customer_list.length===0">
                <td class="firstTd">{{ item.begin_date + '~' + item.end_date }}</td>
                <td>{{ item.target ? item.target : '暂无' }}</td>
                <td>暂无</td>
                <td>
                  暂无
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                  <div v-if="item.need_visit_customer_list && item.need_visit_customer_list.length">
                            <span v-for="(customer,i) in item.need_visit_customer_list" :key="i"
                                  :class="customer.visited?'text-green':''"
                            >{{ customer.next_visit_time.substring(5) + '——' + customer.name }}</span>
                  </div>
                  <div v-else>
                    暂无
                  </div>
                </td>
              </tr>
            </template>
            <tr
              v-if="companyThisMonthCustomerData.weekReplayDetailList && companyThisMonthCustomerData.weekReplayDetailList.length"
            >
              <td class="firstTd">合计:</td>
              <td colspan="7">
                本月总目标 {{ companyThisMonthCustomerData.target }}万&nbsp;&nbsp;
                签约总额{{ companyThisMonthCustomerData.amount_completed }}万&nbsp;&nbsp;
                总完成率{{ companyThisMonthCustomerData.completion_rate }}%
              </td>
            </tr>
            <tr
              v-if="!companyThisMonthCustomerData.weekReplayDetailList ||(companyThisMonthCustomerData.weekReplayDetailList && companyThisMonthCustomerData.weekReplayDetailList.length===0)"
            >
              <td class="firstTd" colspan="8">
                暂无数据
              </td>
            </tr>
          </table>
        </el-card>
        <!--个人工作复盘表-个人-->
        <!--下月计划-->
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <div style="text-align: center">
              <div>下月计划</div>
            </div>
          </div>
          <div style="text-align: right;padding-right: 20px">
            <div
              v-show="!companyNextMonthCustomerData.can_edit && companyNextMonthCustomerData.weekCustomerVOList && companyNextMonthCustomerData.weekCustomerVOList.length && checkShowNextFillBtn(companyNextMonthCustomerData)"
            >
              <el-button type="text" size="mini" @click="companyNextMonthCustomerData.can_edit=true">填写
              </el-button>
              <el-tooltip slot="label" placement="top" content="目标数据会同步到客户跟进的签约额中">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <el-button v-show="companyNextMonthCustomerData.can_edit" type="text" size="mini"
                       @click="saveNextMonthTargetFilling(1)"
            >保存
            </el-button>
            <el-button v-show="companyNextMonthCustomerData.can_edit" type="text" size="mini"
                       @click="cancelNextMonthTargetFilling(1)"
            >取消
            </el-button>
          </div>
          <table v-loading="companyNextMonthTableLoading" class="mailTable" style="width: 100%">
            <tr class="firstTr header">
              <td class="firstTd" colspan="4">
                {{
                  companyNextMonthCustomerData.month
                }}月份目标{{
                  companyNextMonthCustomerData.target ? companyNextMonthCustomerData.target + '万元' : '暂无'
                }}
              </td>
            </tr>
            <tr class="header_two">
              <td class="firstTd" style="width: 15%">周期时间</td>
              <td style="width: 20%">本周总目标/万元</td>
              <td style="width: 50%">目标客户组成</td>
              <td style="width: 15%">本周目标/万元</td>
            </tr>
            <template
              v-if="companyNextMonthCustomerData.weekCustomerVOList && companyNextMonthCustomerData.weekCustomerVOList.length"
              v-for="(week,i) in companyNextMonthCustomerData.weekCustomerVOList"
            >
              <tr v-if="week.customerTargetVOList && week.customerTargetVOList.length"
                  v-for="(customer,index) in week.customerTargetVOList" :key="i+'_'+index"
              >
                <td v-if="index ===0" class="firstTd" :rowspan="week.customerTargetVOList.length">
                  {{ week.begin_date + '~' + week.end_date }}
                </td>
                <td v-if="index === 0" :rowspan="week.customerTargetVOList.length">{{ week.target }}</td>
                <td>
                  {{ customer.name }}
                </td>
                <td>
                  <div v-if="companyNextMonthCustomerData.can_edit">
                    <el-input v-model="customer.fill_target" size="mini" placeholder="请输入目标" type="number"
                              step="0.01"
                    >
                      <template slot="append">万</template>
                    </el-input>
                  </div>
                  <div v-if="!companyNextMonthCustomerData.can_edit">
                    {{
                      customer.target_quota !== null ? customer.target_quota : '暂无（可填写）'
                    }}
                  </div>
                </td>
              </tr>
              <tr
                v-if="!week.customerTargetVOList ||(week.customerTargetVOList && week.customerTargetVOList.length === 0) "
              >
                <td class="firstTd">
                  {{ week.begin_date + '~' + week.end_date }}
                </td>
                <td>{{ week.target }}</td>
                <td>
                  暂无
                </td>
                <td>
                  暂无
                </td>
              </tr>
            </template>
            <tr
              v-if="!companyNextMonthCustomerData.weekCustomerVOList||(companyNextMonthCustomerData.weekCustomerVOList && companyNextMonthCustomerData.weekCustomerVOList.length===0)"
            >
              <td colspan="4" class="firstTd">无数据</td>
            </tr>
            <tr
              v-if="companyNextMonthCustomerData.weekCustomerVOList && companyNextMonthCustomerData.weekCustomerVOList.length"
            >
              <td class="firstTd" colspan="3">汇总/万元</td>
              <td>{{ companyNextMonthCustomerData.fill_count }}</td>
            </tr>
          </table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="个人复盘" name="2">
        <!--本月目标-->
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <div style="text-align: center">
              <div>本月目标</div>
            </div>
          </div>
          <div style="text-align: right;padding-right: 20px">
            <div v-show="!myThisMonthCustomerData.can_edit && checkShowFillBtn(myThisMonthCustomerData)">
              <el-button type="text" size="mini"
                         @click="myThisMonthCustomerData.can_edit=true"
              >填写
              </el-button>
              <el-tooltip slot="label" placement="top" content="目标数据会同步到客户跟进的签约额中">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <el-button v-show="myThisMonthCustomerData.can_edit" type="text" size="mini"
                       @click="saveThisMonthTargetFilling(2)"
            >保存
            </el-button>
            <el-button v-show="myThisMonthCustomerData.can_edit" type="text" size="mini"
                       @click="cancelThisMonthTargetFilling(2)"
            >取消
            </el-button>
          </div>
          <table v-loading="myThisMonthTableLoading" class="mailTable" style="width: 100%">
            <tr class="firstTr header">
              <td class="firstTd" colspan="7">
                {{ myThisMonthCustomerData.month }}
                月份目标{{ myThisMonthCustomerData.target ? myThisMonthCustomerData.target + '万元' : '暂无' }}
              </td>
              <td>辅助与后期签单</td>
            </tr>
            <tr class="header_two">
              <td class="firstTd" style="width: 12%">周期时间</td>
              <td style="width: 6%">本周总目标<br/>(万元)</td>
              <td style="width: 10%">目标客户组成</td>
              <td style="width: 17%">本周目标<br/>(万元)</td>
              <td style="width: 10%">签约金额<br/>(万元)</td>
              <td style="width: 10%">签约时间</td>
              <td style="width: 5%">完成率</td>
              <td style="width: 30%">本周期需要拜访的客户</td>
            </tr>
            <template
              v-if="myThisMonthCustomerData.weekReplayDetailList && myThisMonthCustomerData.weekReplayDetailList.length"
              v-for="item in myThisMonthCustomerData.weekReplayDetailList"
            >
              <tr v-if="item.target_customer_list && item.target_customer_list.length"
                  v-for="(tmp,index) in item.target_customer_list"
              >
                <td v-if="index===0" class="firstTd" :rowspan="item.target_customer_list.length">
                  {{ item.begin_date + '~' + item.end_date }}
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">{{ item.target }}</td>
                <td>{{ tmp.name }}</td>
                <td>
                  <div v-if="!tmp.is_created">
                    {{ tmp.target ? tmp.target : '暂无' }}
                  </div>
                  <div v-else>
                    <el-input v-show="myThisMonthCustomerData.can_edit" size="mini"
                              v-model="tmp.fill_target" type="number" step="0.01"
                              placeholder="请输入目标"
                    >
                      <template slot="append">万</template>
                    </el-input>
                    <div v-show="!myThisMonthCustomerData.can_edit">
                      {{ tmp.fill_target ? tmp.fill_target : '暂无' }}（可填写)
                    </div>
                  </div>
                </td>
                <td>
                  <div v-for="d in tmp.contracted_amount_list">{{ d }}</div>
                </td>
                <td>
                  <div v-for="d in tmp.contracted_amount_list">{{ d }}</div>
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">{{
                    item.completion_rate
                  }}%
                </td>
                <td v-if="index===0" :rowspan="item.target_customer_list.length">
                    <span v-for="(customer,i) in item.need_visit_customer_list" :key="i"
                          :class="customer.visited?'text-green':''"
                    >{{ customer.next_visit_time.substring(5) + '——' + customer.name }}</span>
                  <div v-if="!item.need_visit_customer_list || item.need_visit_customer_list.length===0">
                    暂无
                  </div>
                </td>
              </tr>
              <tr v-if="!item.target_customer_list|| item.target_customer_list.length===0">
                <td class="firstTd">{{ item.begin_date + '~' + item.end_date }}</td>
                <td>{{ item.target }}</td>
                <td>暂无</td>
                <td>
                  暂无
                </td>
                <td>暂无</td>
                <td>暂无</td>
                <td>暂无</td>
                <td>
                  <div v-if="item.need_visit_customer_list && item.need_visit_customer_list.length">
                            <span v-for="(customer,i) in item.need_visit_customer_list" :key="i"
                                  :class="customer.visited?'text-green':''"
                            >{{ customer.next_visit_time.substring(5) + '——' + customer.name }}</span>
                  </div>
                  <div v-else>
                    暂无
                  </div>
                </td>
              </tr>
            </template>
            <tr
              v-if="myThisMonthCustomerData.weekReplayDetailList && myThisMonthCustomerData.weekReplayDetailList.length"
            >
              <td class="firstTd">合计:</td>
              <td colspan="7">
                本月总目标 {{ myThisMonthCustomerData.target }}万&nbsp;&nbsp;
                签约总额{{ myThisMonthCustomerData.amount_completed }}万&nbsp;&nbsp;
                总完成率{{ myThisMonthCustomerData.completion_rate }}%
              </td>
            </tr>
            <tr
              v-if="!myThisMonthCustomerData.weekReplayDetailList ||(myThisMonthCustomerData.weekReplayDetailList && myThisMonthCustomerData.weekReplayDetailList.length===0)"
            >
              <td class="firstTd" colspan="8">
                暂无数据
              </td>
            </tr>
          </table>
          <!--            </div>-->
          <!--          </el-collapse-transition>-->
        </el-card>
        <!--下月计划-->
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <div style="text-align: center">
              <div>下月计划</div>
            </div>
          </div>
          <div style="text-align: right;padding-right: 20px">
            <div
              v-show="!myNextMonthCustomerData.can_edit && myNextMonthCustomerData.weekCustomerVOList && myNextMonthCustomerData.weekCustomerVOList.length && checkShowNextFillBtn(myNextMonthCustomerData)"
            >
              <el-button
                type="text" size="mini"
                @click="myNextMonthCustomerData.can_edit=true"
              >填写
              </el-button>
              <el-tooltip slot="label" placement="top" content="目标数据会同步到客户跟进的签约额中">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <el-button v-show="myNextMonthCustomerData.can_edit" type="text" size="mini"
                       @click="saveNextMonthTargetFilling(2)"
            >保存
            </el-button>
            <el-button v-show="myNextMonthCustomerData.can_edit" type="text" size="mini"
                       @click="cancelNextMonthTargetFilling(2)"
            >取消
            </el-button>
          </div>
          <table v-loading="myNextMonthTableLoading" class="mailTable" style="width: 100%">
            <tr class="firstTr header">
              <td class="firstTd" colspan="4">
                {{
                  myNextMonthCustomerData.month
                }}月份目标{{ myNextMonthCustomerData.target }}万元
              </td>
            </tr>
            <tr class="header_two">
              <td class="firstTd" style="width: 15%">周期时间</td>
              <td style="width: 20%">本周总目标/万元</td>
              <td style="width: 50%">目标客户组成</td>
              <td style="width: 15%">本周目标/万元</td>
            </tr>
            <template
              v-if="myNextMonthCustomerData.weekCustomerVOList && myNextMonthCustomerData.weekCustomerVOList.length"
              v-for="(week,i) in myNextMonthCustomerData.weekCustomerVOList"
            >
              <tr v-if="week.customerTargetVOList && week.customerTargetVOList.length"
                  v-for="(customer,index) in week.customerTargetVOList" :key="i+'_'+index"
              >
                <td v-if="index ===0" class="firstTd" :rowspan="week.customerTargetVOList.length">
                  {{ week.begin_date + '~' + week.end_date }}
                </td>
                <td v-if="index === 0" :rowspan="week.customerTargetVOList.length">{{ week.target }}</td>
                <td>
                  {{ customer.name }}
                </td>
                <td>
                  <div v-if="myNextMonthCustomerData.can_edit">
                    <el-input v-model="customer.fill_target" type="number" step="0.01" size="mini"
                              placeholder="请输入目标"
                    >
                      <template slot="append">万</template>
                    </el-input>
                  </div>
                  <div v-if="!myNextMonthCustomerData.can_edit">
                    {{
                      customer.target_quota !== null ? customer.target_quota : '暂无（可填写）'
                    }}
                  </div>
                </td>
              </tr>
              <tr
                v-if="!week.customerTargetVOList ||(week.customerTargetVOList && week.customerTargetVOList.length === 0) "
              >
                <td class="firstTd">
                  {{ week.begin_date + '~' + week.end_date }}
                </td>
                <td>{{ week.target }}</td>
                <td>
                  暂无
                </td>
                <td>
                  暂无
                </td>
              </tr>
            </template>
            <tr
              v-if="!myNextMonthCustomerData.weekCustomerVOList||(myNextMonthCustomerData.weekCustomerVOList && myNextMonthCustomerData.weekCustomerVOList.length===0)"
            >
              <td colspan="4">无数据</td>
            </tr>
            <tr v-if="myNextMonthCustomerData.weekCustomerVOList && myNextMonthCustomerData.weekCustomerVOList.length">
              <td class="firstTd" colspan="3">汇总/万元</td>
              <td>{{ myNextMonthCustomerData.fill_count }}</td>
            </tr>
          </table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="客户推进" name="3">
        <!--客户拜访跟进动作推进表-->
        <el-card shadow="always" v-loading="myCustomerTableLoading">
          <div slot="header" class="clearfix">
            <div style="text-align: center">客户拜访跟进动作推进表</div>
            <el-form :inline="true" size="mini">
              <el-form-item label="客户名称">
                <el-input v-model.trim="customerName" placeholder="请输入客户名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button plain type="primary" @click="customerSearch">搜索</el-button>
                <el-button plain type="info" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <table class="mailTable" style="width: 100%">
            <tr class="firstTr header_two">
              <td class="firstTd" style="width: 8%">客户名称</td>
              <td style="width: 8%">客户划分</td>
              <td style="width: 5%">预估签单额（万元）</td>
              <td style="width: 4%">成交评估</td>
              <td style="width: 10%">预估签单时间</td>
              <td style="width: 5%">签约现金</td>
              <td style="width: 5%">签约置换额</td>
              <td style="width: 10%">预估执行时间</td>
              <td style="width: 5%">执行金额</td>
              <td style="width: 10%">预估回款时间</td>
              <td style="width: 5%">回款金额</td>
              <td style="width: 5%">拜访次数</td>
              <td style="width: 15%">推进进度</td>
              <td style="width: 10%">下次跟进时间</td>
              <td style="width: 7%">
                <el-tooltip effect="dark" content="红色为未确认收到，绿色为确认收到"
                            placement="top">
                  <span><i class="el-icon-question"></i>批注</span>
                </el-tooltip>
              </td>
            </tr>
            <tr v-if="filterCustomerData && filterCustomerData.length" v-for="customer in filterCustomerData">
              <td class="firstTd">{{ customer.name }}</td>
              <td>{{ customer.type === 1 ? '公司' : '个人' }}</td>
              <td>{{ customer.newest_contract_amount ? customer.newest_contract_amount : '暂无' }}</td>
              <td>{{
                  customer.newest_transaction_rate ? getPercentageStr(customer.newest_transaction_rate) : '暂无'
                }}
              </td>
              <td>
                {{
                  customer.newest_transaction_begin_date ? customer.newest_transaction_begin_date + '~' + customer.newest_transaction_end_date : '暂无'
                }}<br>
                <el-button type="text" style="text-decoration: underline" @click="openEstimateForm(customer,false)">增加
                </el-button>
                <!--                <el-button v-if="customer.target_record_id" type="text" style="text-decoration: underline"-->
                <!--                           @click="openEstimateForm(customer,true)"-->
                <!--                >修改-->
                <!--                </el-button>-->
                <el-button type="text" style="text-decoration: underline"
                           @click="centerDialogVisible = true;tmpCustomerId=customer.id"
                >历史
                </el-button>
              </td>
              <td>{{
                  customer.newest_contract_pay_cash_amount ? customer.newest_contract_pay_cash_amount + '元' : ''
                }}
              </td>
              <td>{{
                  customer.newest_contract_displace_amount ? customer.newest_contract_displace_amount + '元' : ''
                }}
              </td>
              <td>
                {{
                  customer.newest_implement_begin_date ? customer.newest_implement_begin_date + '~' + customer.newest_implement_end_date : '暂无'
                }}<br>
                <el-button type="text" style="text-decoration: underline" @click="openImplementForm(customer,false)">增加
                </el-button>
                <!--                <el-button v-if="customer.target_record_id" type="text" style="text-decoration: underline"-->
                <!--                           @click="openEstimateForm(customer,true)"-->
                <!--                >修改-->
                <!--                </el-button>-->
                <el-button type="text" style="text-decoration: underline"
                           @click="centerImplementDialogVisible = true;tmpCustomerId=customer.id"
                >历史
                </el-button>
              </td>
              <td>{{ customer.newest_implement_amount ? customer.newest_implement_amount : '暂无' }}</td>
              <td>
                {{
                  customer.newest_payment_begin_date ? customer.newest_payment_begin_date + '~' + customer.newest_payment_end_date : '暂无'
                }}<br>
                <el-button type="text" style="text-decoration: underline" @click="openPaymentForm(customer,false)">增加
                </el-button>
                <!--                <el-button v-if="customer.target_record_id" type="text" style="text-decoration: underline"-->
                <!--                           @click="openEstimateForm(customer,true)"-->
                <!--                >修改-->
                <!--                </el-button>-->
                <el-button type="text" style="text-decoration: underline"
                           @click="centerPaymentDialogVisible = true;tmpCustomerId=customer.id"
                >历史
                </el-button>
              </td>
              <td>{{ customer.newest_payment_amount ? customer.newest_payment_amount : '暂无' }}</td>
              <td>{{ customer.visit_count }}次</td>
              <td>
                <div v-if="customer.customerFollowVO">
                  日期：{{ customer.customerFollowVO.follow_time }}<br>
                  对接人：{{ customer.customerFollowVO.opposite_person }}<br>
                  联系方式:{{ customer.customerFollowVO.phone }}<br>
                  拜访目的：{{ customer.customerFollowVO.reasons_for_recommendation }}<br>
                  拜访结果：{{ customer.customerFollowVO.achievements }}<br>
                  推进动作：<span
                  v-if="customer.customerFollowVO.propelling_action_name && customer.customerFollowVO.propelling_action_name.length>0"
                >
                {{ customer.customerFollowVO.propelling_action_name.join(',') }}<br/>
              </span>
                  <span v-else>
                暂无<br/>
              </span>
                  推荐资源：<span
                  v-if="customer.customerFollowVO.recommend_resource_name && customer.customerFollowVO.recommend_resource_name.length>0"
                >
                {{ customer.customerFollowVO.recommend_resource_name.join(',') }}<br/>
              </span>
                  <span v-else>暂无<br/></span>
                </div>
                <div v-if="!customer.customerFollowVO">
                  暂无跟进记录
                </div>
                <el-button type="text" style="text-decoration: underline" @click="openVisitDialog(customer)">增加
                </el-button>
                <el-button type="text" style="text-decoration: underline"
                           @click="visitRecordDialogVisible=true;tmpCustomerId = customer.id"
                >历史
                </el-button>
              </td>
              <td>
                <el-date-picker
                  v-if="customer.edit_date"
                  v-model="customer.next_visit_time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy年MM月dd日"
                  size="mini"
                  style="width: 160px"
                  :clearable="false"
                >
                </el-date-picker>
                <span v-else>
                  {{ customer.next_visit_time ? customer.next_visit_time : '暂无' }}<br>
                </span>
                <el-input v-if="customer.edit_date" style="margin-top: 5px" type="textarea" v-model="customer.purpose"
                          placeholder="请输入拜访目的"
                ></el-input>
                <span v-else>
                  {{ customer.purpose ? customer.purpose : '暂无拜访目的' }}<br>
                </span>
                <el-button v-show="!customer.edit_date" size="mini" type="text"
                           @click="customer.edit_date = true;tmpDate = customer.next_visit_time;tmpPurpose = customer.purpose"
                >{{ customer.next_visit_time ? '修改' : '增加' }}
                </el-button>
                <el-button v-show="customer.edit_date" size="mini" type="text" @click="addNextVisitDate(customer)">保存
                </el-button>
                <el-button v-show="customer.edit_date" size="mini" type="text"
                           @click="customer.edit_date = false;customer.next_visit_time=tmpDate;customer.purpose=tmpPurpose"
                >取消
                </el-button>
              </td>
              <td>
                <div v-if="customer.lastCustomerVisitComments">
                  <el-tooltip effect="dark" :content="customer.lastCustomerVisitComments.comments"
                              placement="top"
                  >
                    <div class="comments"
                         :class="customer.lastCustomerVisitComments.received_or_not?'text-green':'text-red'"
                    >
                      {{
                        customer.lastCustomerVisitComments.comments
                      }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else>暂无</div>
                <div style="width: 70px;margin: 0 auto;text-align: center">
                  <el-button
                    v-if="customer.lastCustomerVisitComments && !customer.lastCustomerVisitComments.received_or_not"
                    type="text" size="mini" @click="confirmReceived(customer.lastCustomerVisitComments)"
                  >收到
                  </el-button>
                  <el-button type="text" size="mini" @click="showVisitCommentsHistoryDialog(customer.id)">历史
                  </el-button>
                </div>
              </td>
            </tr>
            <tr v-if="!filterCustomerData || (filterCustomerData && filterCustomerData.length===0)">
              <td class="firstTd" colspan="10">暂无数据</td>
            </tr>
          </table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="estimateForm.record_id?'添加签约':'添加签约'" :visible.sync="estimateDialogVisible"
               width="50%" center
               @close="closeEstimateDialog"
    >
      <el-form ref="estimateForm" label-width="130px" size="mini" :model="estimateForm" :rules="estimateFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预估签约时间" prop="week_id" v-loading="weekSelectLoading">
              <el-select v-model="estimateForm.week_id" placeholder="请选择时间" style="margin: 0 auto;width: 100%">
                <el-option v-for="week in weekArr" :key="week.id" :value="week.id"
                           :label="week.begin_date+'~'+week.end_date"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成交预估" prop="transaction_evaluation">
              <el-select v-model="estimateForm.transaction_evaluation" style="width: 100%" placeholder="请输入签约预估">
                <el-option :value="1" label="100%"></el-option>
                <el-option :value="0.8" label="80%"></el-option>
                <el-option :value="0.6" label="60%"></el-option>
                <el-option :value="0.4" label="40%"></el-option>
                <el-option :value="0.2" label="20%"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="quota">
              <span slot="label">
                <el-tooltip slot="label" placement="top" content="签约额数据会和工作复盘中的目标同步">
                  <span>预估签约额<i class="el-icon-question"></i></span>
                </el-tooltip>
              </span>
              <el-input v-model="estimateForm.quota" placeholder="请输入预估签约额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="estimateDialogVisible = false" size="mini">关 闭</el-button>
        <el-button type="primary" @click="addEstimate" size="mini">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="implementForm.record_id ?'编辑执行预估':'添加执行预估'" :visible.sync="implementDialogVisible"
               width="50%" center
               @close="closeImplementDialog"
    >
      <el-form ref="implementForm" label-width="130px" size="mini" :model="implementForm" :rules="implementFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预估执行时间" prop="week_id" v-loading="weekSelectLoading">
              <el-select v-model="implementForm.week_id" placeholder="请选择时间" style="margin: 0 auto;width: 100%">
                <el-option v-for="week in weekArr" :key="week.id" :value="week.id"
                           :label="week.begin_date+'~'+week.end_date"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="quota">
              <span slot="label">
                <el-tooltip slot="label" placement="top" content="执行金额数据会和工作复盘中的目标同步">
                  <span>预估执行金额<i class="el-icon-question"></i></span>
                </el-tooltip>
              </span>
              <el-input v-model="implementForm.quota" placeholder="请输入预估执行金额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="implementDialogVisible = false" size="mini">关 闭</el-button>
        <el-button type="primary" @click="addImplement" size="mini">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="paymentForm.record_id ?'编辑回款预估':'添加回款预估'" :visible.sync="paymentDialogVisible"
               width="50%" center
               @close="closePaymentDialog"
    >
      <el-form ref="paymentForm" label-width="130px" size="mini" :model="paymentForm" :rules="paymentFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预估回款时间" prop="week_id" v-loading="weekSelectLoading">
              <el-select v-model="paymentForm.week_id" placeholder="请选择时间" style="margin: 0 auto;width: 100%">
                <el-option v-for="week in weekArr" :key="week.id" :value="week.id"
                           :label="week.begin_date+'~'+week.end_date"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="quota">
              <span slot="label">
                <el-tooltip slot="label" placement="top" content="回款金额数据会和工作复盘中的目标同步">
                  <span>预估回款金额<i class="el-icon-question"></i></span>
                </el-tooltip>
              </span>
              <el-input v-model="paymentForm.quota" placeholder="请输入预估回款金额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogVisible = false" size="mini">关 闭</el-button>
        <el-button type="primary" @click="addPayment" size="mini">保 存</el-button>
      </span>
    </el-dialog>

    <!--签约时间历史-->
    <signature-history-dialog :customer-id="tmpCustomerId" :center-dialog-visible="centerDialogVisible"
                              @close="closeEstimateHistoryDialog"
    ></signature-history-dialog>

    <!--执行时间历史-->
    <implement-history-dialog :customer-id="tmpCustomerId" :center-dialog-visible="centerImplementDialogVisible"
                              @close="closeImplementHistoryDialog"
    ></implement-history-dialog>

    <!--回款时间历史-->
    <payment-history-dialog :customer-id="tmpCustomerId" :center-dialog-visible="centerPaymentDialogVisible"
                              @close="closePaymentHistoryDialog"
    ></payment-history-dialog>

    <add-customer-follow-dialog ref="addCustomerFollowDialog" :customer-id="tmpCustomerId"
                                :follow-form-visible="followFormVisible"
                                @close="closeVisitDialog" @save="saveVisitRecord"
    ></add-customer-follow-dialog>
    <!--历史跟进信息-->
    <visit-record-dialog :center-dialog-visible="visitRecordDialogVisible" :customer-id="tmpCustomerId"
                         @close="closeVisitRecordDialog"
    ></visit-record-dialog>
    <visit-comments-history-dialog :customer-id="tmpCustomerId" ref="VisitCommentsHistoryDialog"
                                   @close="closeVisitCommentsHistoryDialog"
    ></visit-comments-history-dialog>
  </div>
</template>

<script>
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import {
  addSigningTime,
  addVisitRecord, confirmReceive,
  nextMonthTarget,
  queryThisMonthTarget,
  saveMonthCustomerTarget,
  addImplementTime,
  addPaymentTime
} from '@/api/workbench/saleMonth'
import { addNextVisitDate, advanceList } from '@/api/customer/customer'
import { list } from '@/api/workbench/week'
import SignatureHistoryDialog from '@/views/business/annual_plan/componets/signatureHistoryDialog'
import ImplementHistoryDialog from '@/views/business/annual_plan/componets/implementHistoryDialog'
import PaymentHistoryDialog from "@/views/business/annual_plan/componets/paymentHistoryDialog";
import VisitRecordDialog from '@/views/business/annual_plan/componets/visitRecordDialog'
import VisitCommentsHistoryDialog from '@/views/business/annual_plan/componets/VisitCommentsHistoryDialog'
import { add, multiply } from '@/utils/amount'
import { cloneDeep } from 'lodash'
import AddCustomerFollowDialog from '@/views/business/customer/components/AddCustomerFollowDialog'

export default {
  name: 'month_target',
  components: { VisitCommentsHistoryDialog, AddCustomerFollowDialog, VisitRecordDialog, SignatureHistoryDialog, ImplementHistoryDialog, PaymentHistoryDialog },
  created() {
    this.initResourcesDict()
    this.initAdvancesDict()
    this.initThisWeekData(1)
    this.initNextMonthData(1)
  },
  beforeDestroy() {
    if (this.notification) {
      this.notification.close()
    }
  },
  data() {
    return {
      implementDialogVisible: false,
      paymentDialogVisible: false,
      implementForm: {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        quota: null
      },
      paymentForm: {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        quota: null
      },
      implementFormRules: {
        week_id: [{ required: true, message: '请选择时间', trigger: 'change' }],
        quota: [{ required: true, message: '请输入预估执行金额', trigger: 'blur' }]
      },
      paymentFormRules: {
        week_id: [{ required: true, message: '请选择时间', trigger: 'change' }],
        quota: [{ required: true, message: '请输入预估回款金额', trigger: 'blur' }]
      },
      centerDialogVisible: false,
      centerImplementDialogVisible: false,
      centerPaymentDialogVisible: false,
      estimateDialogVisible: false,
      visitRecordDialogVisible: false,
      followFormVisible: false,
      notification: null,
      resources_dict: [], // 资源字典
      advances_dict: [], // 推进动作
      opposite_person_arr: [],
      companyThisMothCardShow: false,
      companyNextMothCardShow: false,
      myCustomerThisMonthShow: false,
      myCustomerNextMonthShow: false,
      companyShow: true,
      myCustomerShow: true,
      myCustomerTableLoading: false,
      myThisMonthCustomerData: {},
      companyThisMonthCustomerData: {},
      myNextMonthCustomerData: {},
      companyNextMonthCustomerData: {},
      myCustomerData: [],
      weekArr: [],
      showWeekArr: [],
      estimateForm: {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        transaction_evaluation: null,
        quota: null
      },
      estimateFormRules: {
        week_id: [{ required: true, message: '请选择时间', trigger: 'change' }],
        transaction_evaluation: [{ required: true, message: '请选择成交预估', trigger: 'change' }],
        quota: [{ required: true, message: '请输入预估签单额', trigger: 'blur' }]
      },

      tmpDate: null,
      tmpPurpose: null,
      visitForm: {
        id: null,
        follow_time: null,
        opposite_person: null,
        phone: null,
        achievements: null,
        reasons_for_recommendation: null,
        action_list: null,
        resource_list: null
      },
      visitFormRules: {
        follow_time: [{ required: true, message: '请选择时间', trigger: 'change' }],
        achievements: [{ required: true, message: '请输入达成成果', trigger: 'blur' }],
        opposite_person: [{ required: true, message: '请选择对接人', trigger: 'change' }]
      },
      tmpCustomerId: null,
      weekSelectLoading: false,
      companyThisMonthTableLoading: false,
      companyNextMonthTableLoading: false,
      myThisMonthTableLoading: false,
      myNextMonthTableLoading: false,
      contactSelectLoading: false,
      activeName: '1',
      customerName: null,
      filterCustomerData: [],
      tabKey: 1
    }
  },
  methods: {
    // 初始化推进动作字典
    initAdvancesDict() {
      list_all3rd_bycode({ code: 'khxg-tjdz' }).then(
        res => {
          this.advances_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // initAllData() {
    //   this.initThisWeekData(1)
    //   this.initNextMonthData(1)
    //   this.initThisWeekData(2)
    //   this.initNextMonthData(2)
    // },
    // 初始化推荐资源字典
    initResourcesDict() {
      list_all3rd_bycode({ code: 'khxg-tjzy' }).then(
        res => {
          this.resources_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    addEstimate() {
      this.$refs.estimateForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addSigningTime(this.estimateForm).then(res => {
            this.estimateDialogVisible = false
            this.$message.success('添加成功')
            // this.initAllData()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    addImplement() {
      this.$refs.implementForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addImplementTime(this.implementForm).then(res => {
            this.implementDialogVisible = false
            this.$message.success('添加成功')
            // this.initAllData()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    addPayment() {
      this.$refs.paymentForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addPaymentTime(this.paymentForm).then(res => {
            this.paymentDialogVisible = false
            this.$message.success('添加成功')
            // this.initAllData()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    initThisWeekData(type) {
      if (type === 1) {
        this.companyThisMonthTableLoading = true
      } else {
        this.myThisMonthTableLoading = true
      }
      queryThisMonthTarget({ type }).then(res => {
        this.$set(res.data, 'can_edit', false)
        if (type === 1) {
          this.companyThisMonthTableLoading = false
        } else {
          this.myThisMonthTableLoading = false
        }
        if (res.data.weekReplayDetailList && res.data.weekReplayDetailList.length) {
          res.data.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                if (item.is_created && this.notification === null) {
                  this.notification = this.$notify.error({
                    title: '未填写目标',
                    message: '您的' + (type === 1 ? '维护' : '个人') + '复盘表中本月计划有客户未填写目标',
                    duration: 0,
                    offset: 70
                  })
                }
                this.$set(item, 'fill_target', item.target)
              })
            }
          })
        }
        if (type === 1) {
          this.companyThisMonthCustomerData = res.data
        } else if (type === 2) {
          this.myThisMonthCustomerData = res.data
        }
      })
    },
    initMyCustomerList() {
      this.myCustomerTableLoading = true
      this.customerName = null
      advanceList().then(res => {
        this.myCustomerTableLoading = false
        this.myCustomerData = (res.data || []);
		this.myCustomerData.sort((a, b) => {
					if(a.customerFollowVO && b.customerFollowVO){
						return b.customerFollowVO.follow_time > a.customerFollowVO.follow_time ? 1 : -1;
					}else if(a.customerFollowVO){
						return -1;
					}else if(b.customerFollowVO){
						return 1;
					}else {
						return 0;
					}
				});
		console.log(this.myCustomerData);
        this.myCustomerData.forEach(item => {
          this.$set(item, 'edit_date', false)
        })
        this.filterCustomerData = cloneDeep(this.myCustomerData)
      })
    },
    initWeekList(customer_id, record_id) {
      this.weekSelectLoading = true
      list({ customer_id, record_id }).then(res => {
        this.weekSelectLoading = false
        this.weekArr = res.data
      }).catch(() => {
        this.weekSelectLoading = false
      })
    },
    closeEstimateDialog() {
      this.estimateForm = {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        transaction_evaluation: null,
        quota: null
      }
      this.$nextTick(() => {
        this.$refs.estimateForm.clearValidate()
      })
    },
    closeImplementDialog() {
      this.implementForm = {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        quota: null
      }
      this.$nextTick(() => {
        this.$refs.implementForm.clearValidate()
      })
    },
    closePaymentDialog() {
      this.paymentForm = {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        quota: null
      }
      this.$nextTick(() => {
        this.$refs.paymentForm.clearValidate()
      })
    },
    openEstimateForm(customer, flag) {
      this.estimateDialogVisible = true
      this.estimateForm.id = customer.id
      if (flag) {
        this.estimateForm.record_id = customer.newest_contract_id
        this.estimateForm.target_record_id = customer.target_record_id
        this.estimateForm.week_id = customer.newest_contract_week_id
      } else {
        this.estimateForm.record_id = null
        this.estimateForm.target_record_id = null
        this.estimateForm.week_id = null
      }
      this.initWeekList(customer.id, this.estimateForm.record_id)
      this.estimateForm.quota = customer.newest_contract_amount
      this.estimateForm.transaction_evaluation = customer.newest_transaction_rate
    },
    openImplementForm(customer, flag) {
      this.implementDialogVisible = true
      this.implementForm.id = customer.id
      if (flag) {
        this.implementForm.record_id = customer.newest_contract_id
        this.implementForm.target_record_id = customer.target_record_id
        this.implementForm.week_id = customer.newest_contract_week_id
      } else {
        this.implementForm.record_id = null
        this.implementForm.target_record_id = null
        this.implementForm.week_id = null
      }
      this.initWeekList(customer.id, this.implementForm.record_id)
      this.implementForm.quota = customer.newest_contract_amount
      this.implementForm.transaction_evaluation = customer.newest_transaction_rate
    },
    openPaymentForm(customer, flag) {
      this.paymentDialogVisible = true
      this.paymentForm.id = customer.id
      if (flag) {
        this.paymentForm.record_id = customer.newest_contract_id
        this.paymentForm.target_record_id = customer.target_record_id
        this.paymentForm.week_id = customer.newest_contract_week_id
      } else {
        this.paymentForm.record_id = null
        this.paymentForm.target_record_id = null
        this.paymentForm.week_id = null
      }
      this.initWeekList(customer.id, this.paymentForm.record_id)
      this.paymentForm.quota = customer.newest_contract_amount
      this.paymentForm.transaction_evaluation = customer.newest_transaction_rate
    },
    addNextVisitDate(customer) {
      if (!customer.next_visit_time) {
        this.$message.error('请选择下次跟进时间')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      addNextVisitDate({
        id: customer.id,
        date: customer.next_visit_time,
        purpose: customer.purpose
      }).then(res => {
        loading.close()
        customer.edit_date = false
        this.$message.success('添加成功')
      }).catch(() => {
        loading.close()
      })
    },
    openVisitDialog(customer) {
      this.tmpCustomerId = customer.id
      this.followFormVisible = true
    },
    closeVisitDialog() {
      this.tmpCustomerId = null
      this.followFormVisible = false
    },
    saveVisitRecord(data) {
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      addVisitRecord(data).then(res => {
        this.$refs.addCustomerFollowDialog.closeVisitDialog()
        this.$message.success('添加成功')
        this.initMyCustomerList()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    closeEstimateHistoryDialog() {
      this.centerDialogVisible = false
      this.tmpCustomerId = null
    },
    closeImplementHistoryDialog() {
      this.centerImplementDialogVisible = false
      this.tmpCustomerId = null
    },
    closePaymentHistoryDialog() {
      this.centerPaymentDialogVisible = false
      this.tmpCustomerId = null
    },
    closeVisitRecordDialog() {
      this.visitRecordDialogVisible = false
      this.tmpCustomerId = null
    },
    initNextMonthData(type) {
      if (type === 1) {
        this.companyNextMonthTableLoading = true
      } else {
        this.myNextMonthTableLoading = true
      }
      nextMonthTarget({ type }).then(res => {
        this.$set(res.data, 'fill_count', 0)
        this.$set(res.data, 'can_edit', false)
        if (type === 1) {
          this.companyNextMonthTableLoading = false
        } else {
          this.myNextMonthTableLoading = false
        }
        if (res.data.weekCustomerVOList && res.data.weekCustomerVOList.length) {
          res.data.weekCustomerVOList.forEach(week => {
            if (week.customerTargetVOList && week.customerTargetVOList.length) {
              week.customerTargetVOList.forEach(customer => {
                if (customer.target_quota === null && this.notification === null) {
                  this.notification = this.$notify.error({
                    title: '未填写目标',
                    message: '您的' + (type === 1 ? '维护' : '个人') + '复盘表中下月目标有客户未填写目标',
                    duration: 0,
                    offset: 70
                  })
                }
                this.$set(customer, 'fill_target', customer.target_quota)
              })
            }
          })
        }
        if (type === 1) {
          this.companyNextMonthCustomerData = res.data
        } else {
          this.myNextMonthCustomerData = res.data
        }
      })
    },
    cancelNextMonthTargetFilling(type) {
      if (type === 1) {
        this.companyNextMonthCustomerData.can_edit = false
        if (this.companyNextMonthCustomerData.weekCustomerVOList && this.companyNextMonthCustomerData.weekCustomerVOList.length) {
          this.companyNextMonthCustomerData.weekCustomerVOList.forEach(week => {
            if (week.customerTargetVOList && week.customerTargetVOList.length) {
              week.customerTargetVOList.forEach(customer => {
                customer.fill_target = customer.target_quota
              })
            }
          })
        }
      } else {
        this.myNextMonthCustomerData.can_edit = false
        if (this.myNextMonthCustomerData.weekCustomerVOList && this.myNextMonthCustomerData.weekCustomerVOList.length) {
          this.myNextMonthCustomerData.weekCustomerVOList.forEach(week => {
            if (week.customerTargetVOList && week.customerTargetVOList.length) {
              week.customerTargetVOList.forEach(customer => {
                customer.fill_target = customer.target_quota
              })
            }
          })
        }
      }
    },
    cancelThisMonthTargetFilling(type) {
      if (type === 1) {
        this.companyThisMonthCustomerData.can_edit = false
        if (this.companyThisMonthCustomerData.weekReplayDetailList && this.companyThisMonthCustomerData.weekReplayDetailList.length) {
          this.companyThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                item.fill_target = item.target
              })
            }
          })
        }
      } else {
        this.myThisMonthCustomerData.can_edit = false
        if (this.myThisMonthCustomerData.weekReplayDetailList && this.myThisMonthCustomerData.weekReplayDetailList.length) {
          this.myThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                item.fill_target = item.target
              })
            }
          })
        }
      }
    },
    saveThisMonthTargetFilling(type) {
      if (this.checkThisMonthFill(type)) {
        this.$confirm('保存后无法修改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let arr = []
          if (type === 1) {
            if (this.companyThisMonthCustomerData.weekReplayDetailList && this.companyThisMonthCustomerData.weekReplayDetailList.length) {
              this.companyThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
                if (tmp.target_customer_list && tmp.target_customer_list.length) {
                  tmp.target_customer_list.forEach(item => {
                    arr.push({
                      sale_week_customer_target_id: item.sale_week_customer_target_id,
                      target: item.fill_target
                    })
                  })
                }
              })
            }
          } else {
            if (this.myThisMonthCustomerData.weekReplayDetailList && this.myThisMonthCustomerData.weekReplayDetailList.length) {
              this.myThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
                if (tmp.target_customer_list && tmp.target_customer_list.length) {
                  tmp.target_customer_list.forEach(item => {
                    arr.push({
                      sale_week_customer_target_id: item.sale_week_customer_target_id,
                      target: item.fill_target
                    })
                  })
                }
              })
            }
          }
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          saveMonthCustomerTarget(arr).then(res => {
            this.$message.success('操作成功')
            this.thisMonthFillSubmitSuccess(type)
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }).catch(() => {

        })
      } else {
        this.$message.error('每周的目标额度总和不能小于月度目标')
      }
    },
    saveNextMonthTargetFilling(type) {
      if (this.checkNextMonthFill(type)) {
        let arr = []
        if (type === 1) {
          if (this.companyNextMonthCustomerData.weekCustomerVOList && this.companyNextMonthCustomerData.weekCustomerVOList.length) {
            this.companyNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
              if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
                tmp.customerTargetVOList.forEach(item => {
                  arr.push({
                    sale_week_customer_target_id: item.id,
                    target: item.fill_target
                  })
                })
              }
            })
          }
        } else {
          if (this.myNextMonthCustomerData.weekCustomerVOList && this.myNextMonthCustomerData.weekCustomerVOList.length) {
            this.myNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
              if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
                tmp.customerTargetVOList.forEach(item => {
                  console.log(item)
                  arr.push({
                    sale_week_customer_target_id: item.id,
                    target: item.fill_target
                  })
                })
              }
            })
          }
        }
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        saveMonthCustomerTarget(arr).then(res => {
          this.$message.success('操作成功')
          this.nextMonthFillSubmitSuccess(type)
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        this.$message.error('每周的目标额度总和不能小于月度目标')
      }
    },
    checkNextMonthFill(type) {
      let count = 0
      let flag = false
      if (type === 1) {
        if (this.companyNextMonthCustomerData.weekCustomerVOList && this.companyNextMonthCustomerData.weekCustomerVOList.length) {
          this.companyNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
            if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
              tmp.customerTargetVOList.forEach(item => {
                if (item.fill_target) {
                  count = add(count, item.fill_target)
                }
              })
            }
          })
        }
        flag = count >= this.companyNextMonthCustomerData.target
      } else {
        if (this.myNextMonthCustomerData.weekCustomerVOList && this.myNextMonthCustomerData.weekCustomerVOList.length) {
          this.myNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
            if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
              tmp.customerTargetVOList.forEach(item => {
                if (item.fill_target) {
                  count = add(count, item.fill_target)
                }
              })
            }
          })
        }
        flag = count >= this.myNextMonthCustomerData.target
      }
      return flag
    },
    checkThisMonthFill(type) {
      let count = 0
      let flag = false
      if (type === 1) {
        if (this.companyThisMonthCustomerData.weekReplayDetailList && this.companyThisMonthCustomerData.weekReplayDetailList.length) {
          this.companyThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                count = add(count, item.fill_target)
              })
            }
          })
        }
        flag = count >= this.companyThisMonthCustomerData.target
      } else {
        if (this.myThisMonthCustomerData.weekReplayDetailList && this.myThisMonthCustomerData.weekReplayDetailList.length) {
          this.myThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                count = add(count, item.fill_target)
              })
            }
          })
        }
        flag = count >= this.myThisMonthCustomerData.target
      }
      return flag
    },
    thisMonthFillSubmitSuccess(type) {
      if (type === 1) {
        this.companyThisMonthCustomerData.can_edit = false
        if (this.companyThisMonthCustomerData.weekReplayDetailList && this.companyThisMonthCustomerData.weekReplayDetailList.length) {
          this.companyThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                item.is_created = false
                item.target = item.fill_target
              })
            }
          })
        }
      } else {
        this.myThisMonthCustomerData.can_edit = false
        if (this.myThisMonthCustomerData.weekReplayDetailList && this.myThisMonthCustomerData.weekReplayDetailList.length) {
          this.myThisMonthCustomerData.weekReplayDetailList.forEach(tmp => {
            if (tmp.target_customer_list && tmp.target_customer_list.length) {
              tmp.target_customer_list.forEach(item => {
                item.is_created = false
                item.target = item.fill_target
              })
            }
          })
        }
      }
    },
    checkShowFillBtn(data) {
      let flag = false
      if (data.weekReplayDetailList && data.weekReplayDetailList.length) {
        data.weekReplayDetailList.forEach(tmp => {
          if (tmp.target_customer_list && tmp.target_customer_list.length) {
            tmp.target_customer_list.forEach(item => {
              if (item.is_created) {
                flag = true
              }
            })
          }
        })
      }
      return flag
    },
    checkShowNextFillBtn(data) {
      let flag = false
      if (data.weekCustomerVOList && data.weekCustomerVOList.length) {
        data.weekCustomerVOList.forEach(tmp => {
          if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
            tmp.customerTargetVOList.forEach(item => {
              if (item.fill_target !== undefined) {
                flag = true
              }
            })
          }
        })
      }
      return flag
    },
    nextMonthFillSubmitSuccess(type) {
      if (type === 1) {
        this.companyNextMonthCustomerData.can_edit = false
        if (this.companyNextMonthCustomerData.weekCustomerVOList && this.companyNextMonthCustomerData.weekCustomerVOList.length) {
          this.companyNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
            if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
              tmp.customerTargetVOList.forEach(item => {
                item.target_quota = item.fill_target
              })
            }
          })
        }
      } else {
        this.myNextMonthCustomerData.can_edit = false
        if (this.myNextMonthCustomerData.weekCustomerVOList && this.myNextMonthCustomerData.weekCustomerVOList.length) {
          this.myNextMonthCustomerData.weekCustomerVOList.forEach(tmp => {
            if (tmp.customerTargetVOList && tmp.customerTargetVOList.length) {
              tmp.customerTargetVOList.forEach(item => {
                item.target_quota = item.fill_target
              })
            }
          })
        }
      }
    },
    getPercentageStr(num) {
      if (num) {
        return multiply(num, 100) + '%'
      } else {
        return ''
      }
    },
    handleClick() {
      let num = parseInt(this.activeName)
      if (this.activeName === '1' || this.activeName == '2') {
        this.initThisWeekData(num)
        this.initNextMonthData(num)
      } else {
        this.initMyCustomerList()
      }
    },
    customerSearch() {
      if (this.customerName) {
        let filter = this.myCustomerData.filter(item => item.name.indexOf(this.customerName) >= 0)
        this.filterCustomerData = cloneDeep(filter)
      }
    },
    reset() {
      this.customerName = null
      this.filterCustomerData = cloneDeep(this.myCustomerData)
    },
    showVisitCommentsHistoryDialog(id) {
      this.tmpCustomerId = id
      this.$nextTick(() => {
        this.$refs.VisitCommentsHistoryDialog.open()
      })
    },
    closeVisitCommentsHistoryDialog() {
      this.tmpCustomerId = null
    },
    confirmReceived(lastCustomerVisitComments) {
      this.$confirm('确认收到？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提价中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        confirmReceive({ id: lastCustomerVisitComments.id }).then(res => {
          lastCustomerVisitComments.received_or_not = true
          this.$message.success('操作成功')
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    }
  },
  watch: {
    'companyNextMonthCustomerData.weekCustomerVOList': {
      handler(val) {
        let count = 0
        if (val && val.length) {
          val.forEach(item => {
            if (item.customerTargetVOList && item.customerTargetVOList.length) {
              item.customerTargetVOList.forEach(customer => {
                if (this.companyNextMonthCustomerData.can_edit) {
                  if (customer.fill_target) {
                    count = add(count, customer.fill_target)
                  }
                } else {
                  if (customer.target_quota) {
                    count = add(count, customer.target_quota)
                  }
                }
              })
            }
          })
        }
        this.companyNextMonthCustomerData.fill_count = count
      },
      deep: true
    },
    'myNextMonthCustomerData.weekCustomerVOList': {
      handler(val) {
        let count = 0
        if (val && val.length) {
          val.forEach(item => {
            if (item.customerTargetVOList && item.customerTargetVOList.length) {
              item.customerTargetVOList.forEach(customer => {
                if (this.myNextMonthCustomerData.can_edit) {
                  if (customer.fill_target) {
                    count = add(count, customer.fill_target)
                  }
                } else {
                  if (customer.target_quota) {
                    count = add(count, customer.target_quota)
                  }
                }
              })
            }
          })
        }
        this.myNextMonthCustomerData.fill_count = count
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 15px 0 15px 0;
}

.el-card .mailTable {
  width: 90%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.el-card .mailTable tr td {
  height: 35px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 10px auto;
}

.header_two {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin: 10px auto;
}

.required {
  color: red;
}

/deep/ .mailTable .el-form-item {
  margin-bottom: 0;
}

/deep/ .mailTable .el-form-item__content {
  line-height: 0;
}

.title_td {
  background: #F5F7FA;
  font-weight: bold;
}
</style>
